import React, { Component } from 'react';
import { View, Image, Text, TouchableWithoutFeedback } from 'react-native';
import { default as Images } from '../../images';
import { Colors, AppStyles } from '../../style';
var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;

/**
 * 查看更多
 */
export default class LookMore extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isopen: false,
        }
    }

    render() {
        return (
            <View>
                {this.state.isopen && <View>{this.props.children || <View />}</View>}
                <View style={{ height: 1, width: screenWidth, backgroundColor: Colors.grey }}></View>
                <TouchableWithoutFeedback onPress={() => {
                    this.setState({
                        isopen: !this.state.isopen
                    })
                }}>
                    <View style={{ width: screenWidth, height: 45, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                        <Text style={AppStyles.mediumTextStyle}>{this.state.isopen ? '收起' : '查看更多'}</Text>
                        <Image source={this.state.isopen ? Images.up : Images.down} style={{ width: 20, height: 20 }} />
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}